/*********************************************************
 * MIXINS
 */

.border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.border-radius (@radius: 0) {
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.border-top-radius (@radius: 5px) {
  -webkit-border-top-left-radius: @radius;
  -webkit-border-top-right-radius: @radius;
  border-top-left-radius: @radius;
  border-top-right-radius: @radius;
}

.box-shadow (@first, @second, @third, @colour) {
  -webkit-box-shadow: @first @second @third @colour;
  -moz-box-shadow:    @first @second @third @colour;
  box-shadow:         @first @second @third @colour;
}

.perspective (@p: 1000) {
  -webkit-perspective: @p;
  -moz-perspective: @p;
  perspective: @p;
}

.backface-visibility (@value: hidden) {
  -webkit-backface-visibility: @value;
  -moz-backface-visibility: @value;
  backface-visibility: @value;
}

.rotateX (@deg: 180deg) {
  -webkit-transform: rotateX(@deg);
  -moz-transform: rotateX(@deg);
  transform: rotateX(@deg);
}

.rotateY (@deg: 180deg) {
  -webkit-transform: rotateY(@deg);
  -moz-transform: rotateY(@deg);
  transform: rotateY(@deg);
}

.threedee-transition (@time: 0.3s) {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: transform @time;
  -moz-transition: transform @time;
  transition: transform @time;
}

.clearfix {
  display: inline-block;

  &:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
}

.transition(@transition) {
  -webkit-transition: @transition;
  transition: @transition;
}
